/** @jsxImportSource @emotion/react */
import {  Global } from "@emotion/react";
import * as React from "react";
import {
    useTheme,
    Layer,
    Text,
    Button,
    Link as StyledLink,
    LayerLoading,
    Alert, Spinner,
    Container, Input, InputGroup, IconArrowRight, Tabs, Tab, Pager, TabPanel, ListFlexRow, Itext
} from "customize-easy-ui-component";
//import { useSession, useLoginToServer, useRegisterToServer } from "./auth";
//query-string是其他的基础库所依赖的，不是直接引入的。
import queryString from "query-string";
import {useContext} from "react";
import {UserContext} from "../routing/UserContext";
// import useLoginMutation from "./useLoginMutation";
// import useRegisterMutation from "./useRegisterMutation";
import {AloneContainer} from "../comp/AloneContainer";
// import {Global} from "@emotion/react/dist/emotion-react.cjs";
import backgroundAll from "./pic/2518841076.webp";
import {eqpUseStateMap} from "../pipeline/edit/管道单元";
import {eqpTypeAllMap} from "../dict/eqpComm";
import 切开了 from "./pic/切开了.png";
import 留白区域 from "./pic/留白区域.png";
import 电梯第三列 from "./pic/电梯第三列.png";
import 切分井道 from "./pic/切分井道.png";


//密码hash 防止在服务后台泄密
var sha256 = require('hash.js/lib/hash/sha/256');
// var sha512 = require('hash.js/lib/hash/sha/512');   128个字符版本，对于口令来讲太长了点，还是改256输出是64个字符。Hex; BCryptPasswordEncoder只能支持最大72个字符！


interface LoginProps {
}
export const Login: React.FunctionComponent<LoginProps> = props => {
    const {user, setUser} =useContext(UserContext);
    //我的身份合法吗
    const [isMeUser, setIsMeUser] =React.useState(user!==null);
  const theme = useTheme();
  const qs = queryString.parse(window.location.search);
  const [isRegistering, setIsRegistering] = React.useState(
    typeof qs.register === "string"
  );

  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [form, setForm] = React.useState({ username: "", password: "",
         mobile:'', external:'旧平台'} as any);

    const {call:submitfunc, doing:isInFlight}= {} as any;//useLoginMutation();
    const {call:registerfunc, isInFlight:isload, result:regOK}= {} as any;//useRegisterMutation();
  //const { result:regOK, submit:registerfunc, error:errReg } = useRegisterToServer(form);
  //console.log("登录机密 开始userList=",regOK,"errReg=",errReg);

  //用<form> 来提交，这样required属性就能生效了，能够验证表单的内容。
  async function doLogin(e: React.FormEvent  | Event)
  {
      e.preventDefault();
      let encodePass=sha256().update(form.password).digest('hex');
      try {
        setError("");
        setLoading(true);
        await  submitfunc(form.username, encodePass);
        //实际await不会在这里阻塞等待的！
        //setIsMeUser(false);  加上这个导致点登陆不管后端应答与否，都会被立刻跳转URL='/'
      } catch (err: any) {
        setLoading(false);
        // @ts-ignore
          setError(err.message);
      }
  }

  /*加密算法修改后，只能重新注册?*/
  async function doRegister(e: React.FormEvent  | Event)
  {
    e.preventDefault();
    if(form?.password2!==form.password)  return setError("两次输入的设置密码不一致");
    let encodePass=sha256().update(form.password).digest('hex');
    try {
      setError("");
      setLoading(true);
      await  registerfunc(form.username, encodePass, form.mobile,
                        form.external, form.eName, form.ePassword);
      setError("恭喜您，账户申请单已提交，等待审核与自动开通，或可立刻联系维护人员去开");
      setLoading(false);
    } catch (err: any) {
      setLoading(false);
        setError(err.message);
    }
  }
    console.log("路由进入 登录伪2页面= isInFlight外部=",isInFlight,"user=",user);
    //都可能无法刷新？ <Redirect  to={from.pathname} />;  setLocation (to: Path, replace?: boolean)
    // React.useEffect(() => {
    //     if(user && !isMeUser)
    //         window.location.href = "/";       //强制刷新页面。
    //     //登录失败的？
    // }, [user,isMeUser]);
    const [tab, setTab] = React.useState(0);
    const tip断开=`"@media print": {pageBreakInside: 'avoid'}`;
    const [分页措施, set分页措施] = React.useState(0);

  return (
    <React.Fragment>
        <Global
            styles={{
                html: {
                    [theme.mediaQueries.md]: {
                        backgroundAttachment: "fixed",
                        backgroundSize: "cover",
                        backgroundImage: `url(${backgroundAll}) !important`
                    },
                    "#root #floormenu": {
                        display: 'none',
                    }
                }
            }}
        />
      <AloneContainer>
          <Layer
            css={{
              margin: theme.spaces.xs,
              background: "unset",
              boxShadow: theme.shadows.lg,
                width: '98vw',
            }}
          >

              <Tabs value={tab} onChange={i => setTab(i)}
                    css={{
                        width: '100%',
                        //子元素选择器  >不能跨代选取  h1.warning + p { ...} 会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。 "& .Tabs__container":
                        //下一级标签的修改样式办法： & 表示在嵌套层次中回溯一层 /空格' '后代选择器/.class名字选择器 <div class="nn11 Tabs__container">点号后面就是类。
                        "&>.Tabs__container":{
                            display: 'inline-flex',
                            justifyContent: 'center',
                        }
                    }}
              >
                  <Tab id="0">封面</Tab>
                  <Tab id="1">缺点</Tab>
                  <Tab id="2">优点</Tab>
                  <Tab id="3">例子-td标签被断开页位置切分</Tab>
                  <Tab id="4">例子-td标签被断开页位置切分2</Tab>
                  <Tab id="5">例子-高度较大的td元素留白区域</Tab>
                  <Tab id="6">例子-电梯报告第三列权衡处理</Tab>
              </Tabs>
              <Pager   lazyLoad={false}  noBind={false}
                       value={tab}   onRequestChange={i => setTab(i)}
                       style={{
                            height: `calc(100vh - 59px)`,     //横屏手机实际测试最佳的取值高度360px最佳116，;。
                       }}
                       paneStyle={{
                           // marginBottom: `20px`,
                           overflowY: 'scroll',
                       }}
              >
                  <TabPanel id="0"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',height: 'inherit'}}>
                          <Text variant="h1" css={{fontSize: '5rem'}}>用Web网页出报告</Text><br/>
                          <Text variant="h1">仓库地址：https://gitee.com/heerzhang/sei-pageend</Text><br/>
                          <Text variant="h1">网页转PDF工具  /page2pdf-server</Text>
                          <Text variant="h1">存储报告数据的后端  /sei-rearend</Text>
                      </div>
                  </TabPanel>
                  <TabPanel id="1"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{marginLeft: '4rem',display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'flex-start',height: 'inherit'}}>
                          <Text variant="h1">1,不知道当前元素到底在第几页，DOM元素位于要被打印分页断开的位置吗？ 断页切分，留白区域，取舍考虑。</Text><br/>
                          <Text variant="h1">2,旧版本的报告模板也需要在线支持的，模板版本管理的兼容性上考虑。离线PDF打印盖章。</Text>
                      </div>
                  </TabPanel>
                  <TabPanel id="2"  css={{height: 'auto',overflowY: 'auto'}}>
                      <div css={{marginLeft: '2rem',display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'flex-start',height: 'inherit'}}>
                          <Text variant="h1">1,不需要控件，无需更新下载软件。</Text><br/>
                          <Text variant="h1">2,不再用已淘汰的IE浏览器，不用FTP上传下载报告了，当前系统的上传下载问题多，安全性差。</Text>
                          <Text variant="h1">3,当前系统的模板版本升级概率高，稍微改改就得升级版本号，web模板多数可不用升级版本号。</Text><br/>
                          <Text variant="h1">4,当前系统的模板版本切换后，若需要回退已经生成的报告，需要转换生成新版本报告的成本很大。若用WEB模板的话，修改模板后用户很快就能浏览到修改后的报告。</Text><br/>
                          <Text variant="h1">5,PDF模板修改困难点，比如要在前面增加几行的就会对后续文档元素布局产生极大影响，会涉及到从上面一页挤到下一页的情况，联动位置变动的修改量就会暴增。</Text><br/>
                          <Text variant="h1">6,监察机构人员以及检验客户需要查验已经正式发行的报告时，不需要下载文件，只需在线浏览，只要有浏览器用户端设备包括手机都能查看报告。</Text><br/>
                          <Text variant="h1">7,用web出报告，打印和转PDF环节可以独立甚至将来可能作为优化掉的选项，报告归档也变成电子化的数据库历史数据的备份，旧版本web模板的维持可用，图片对象存储文件的保留期限。</Text><br/>
                          <Text variant="h1">8,用web出报告，不需要电子签章，技术架构和普通前端网页一致，不再有ocx，Ftp，不需要存储最终报告文件等，模板按需加载到客户端，不同报告切换只需要发起数据库和图片文件请求，对网速流量的需求大幅降低。</Text><br/>
                      </div>
                  </TabPanel>
                  <TabPanel id="3"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',height: 'inherit'}}>
                          <img src={切开了} alt={'切开了'}
                               css={{
                                   //maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                   maxWidth: '-webkit-fill-available',
                                   "@media print": {maxHeight: '26cm', maxWidth: '705px'},         //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                   [theme.mediaQueries.lg]: {
                                      // maxHeight: '18cm',
                                       maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                   height: '70vh',
                               }}
                          />
                      </div>
                  </TabPanel>
                  <TabPanel id="4"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',height: 'inherit'}}>
                          <img src={切分井道} alt={'切分井道'}
                               css={{
                                   //maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                   maxWidth: '-webkit-fill-available',
                                   "@media print": {maxHeight: '26cm', maxWidth: '705px'},         //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                   [theme.mediaQueries.lg]: {
                                       // maxHeight: '18cm',
                                       maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                   height: '70vh',
                                   opacity: 分页措施===1? 0.4 : 'unset',
                               }}
                          />
                          { 分页措施===1 && <Text variant="h1" css={{top:'16rem',fontSize:'2rem',position:'absolute',background:'wheat'}}>{tip断开}</Text>
                          }
                          <div css={{ display: "flex", justifyContent: "flex-end" }}>
                              <Button onPress={() =>{let to=分页措施===1? 0: 分页措施+1; set分页措施(to)}}>进一步讲</Button>
                          </div>
                      </div>
                  </TabPanel>
                  <TabPanel id="4"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',height: 'inherit'}}>
                          <img src={留白区域} alt={'留白区域'}
                               css={{
                                   //maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                   maxWidth: '-webkit-fill-available',
                                   "@media print": {maxHeight: '26cm', maxWidth: '705px'},         //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                   [theme.mediaQueries.lg]: {
                                       // maxHeight: '18cm',
                                       maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                   height: '85vh',
                               }}
                          />
                      </div>
                  </TabPanel>
                  <TabPanel id="6"  css={{height: '100%',overflowY: 'auto'}}>
                      <div css={{display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',height: 'inherit'}}>
                          <img src={电梯第三列} alt={'电梯第三列'}
                               css={{
                                   //maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                   maxWidth: '-webkit-fill-available',
                                   "@media print": {maxHeight: '26cm', maxWidth: '705px'},         //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                   [theme.mediaQueries.lg]: {
                                       // maxHeight: '18cm',
                                       maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                   height: '70vh',
                               }}
                          />
                      </div>
                  </TabPanel>

              </Pager>
          </Layer>
      </AloneContainer>
          <Spinner doing={isInFlight || isload}/>
    </React.Fragment>
  );
};


//用于动态加载，缺省的 [小心错误]function (for composite components) but got: object. Check the render
export default Login;


/*我这<form实际没啥搞头，不能发挥其原来功能了，所以完全可以不用它。实际就剩下点击触发onPress={}完全可替代掉，reset功能也无法利用上的。
  <form  method="post"
           onSubmit={e =>{
               e.preventDefault();
               loadQuery({id: repNo, iwhere: {no: repNo}}) } }>
       <Button type="submit">搜索看</Button>
  总之：<form 完全可抛弃！
屏蔽密码的自动填充功能。
    <Input
      　setForm({ ...form, password: e.currentTarget.value });　这里后面的新属性替换顺序在前面的同名字属性。
    type={ form.password? "password":"text"}
    />
*/
//若用<RouterLink to="/login?register=true">只是在URL?号后面修改的去路由，就不会有任何动作的，因为本身已经是/login这个页面，这样问号后面不作数了。
//使用e.target时要小心，而用e.currentTarget就可放心;  https://blog.csdn.net/syleapn/article/details/81289337
